<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科室导航</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            background-color: #ffffff; /* 设置导航栏背景色 */
            color: #007bff; /* 设置导航栏文字颜色 */
            padding: 15px 0; /* 设置导航栏上下内边距 */
            text-align: center; /* 文字居中 */
            border-radius: 15px; /* 设置导航栏边框圆角 */
        }

        .navbar ul {
            list-style-type: none; /* 去掉列表样式 */
            padding: 0;
        }

        .navbar li {
            display: inline-block; /* 横向排列 */
            margin: 0 20px; /* 设置列表项之间的水平间距 */
        }

        .navbar a {
            color: #007bff; /* 设置链接文字颜色 */
            text-decoration: none; /* 去掉下划线 */
            font-size: 28px; /* 设置导航栏字体大小 */
        }

        /* 样式可以根据需要进行调整 */
        .department {
            margin-bottom: 20px;
        }

        .department h2 {
            margin-bottom: 10px;
        }

        .department ul {
            list-style-type: none;
            padding: 0;
        }

        .department li {
            margin-bottom: 5px;
        }

        /*标签样式*/
        .btn-container {
            text-align: center;
        }

        .btn {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 8px;
        }

        .btn:hover {
            background-color: #45a049;
        }

        /* 标签内容 */
        .btn-container {
            text-align: center;
        }

        .btn {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 8px;
        }

        .btn:hover {
            background-color: #45a049;
        }

        /* 标签内容 */
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            border-radius: 8px;
        }

        /* 显示当前选中的标签内容 */
        .active-tab {
            display: block;
        }
    </style>
</head>
<body>
<div id="app">

    <div class="navbar">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="Department.html">科室导航</a></li>
            <li><a href="DoctorTeam.html">专家团队</a></li>
            <li><a href="Appointment.html">预约挂号</a></li>
            <li><a href="UserAccount.html">个人中心</a></li>
            <li><a href="ContactUs.html">联系我们</a></li>
        </ul>
    </div>

    <div class="btn-container">
        <button class="btn" onclick="openTab('non-surgical')">非手术科室</button>
        <button class="btn" onclick="openTab('surgical')">手术科室</button>
        <button class="btn" onclick="openTab('diagnostic')">诊断相关科室</button>
    </div>

    <!-- 标签内容 -->
    <div id="non-surgical" class="tab-content active-tab">
        <h3>非手术科室内容</h3>
        <p>这里是非手术科室的相关内容。</p>
        <div class="department-buttons">
            <button class="department-button" v-for="department in departments" @click="showDepartment(department)">{{
                department }}
            </button>
        </div>
    </div>

    <div id="surgical" class="tab-content">
        <h3>手术科室内容</h3>
        <!-- 这里是手术科室的相关内容。 -->
    </div>

    <div id="diagnostic" class="tab-content">
        <h3>诊断相关科室内容</h3>
        <p>这里是诊断相关科室的相关内容。</p>
    </div>

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            departments: ['内科学系', '心内科', '呼吸与危重症医学科', /* 其他科室 */]
        },
        methods: {
            showDepartment: function (department) {
                // 在这里处理点击按钮后的逻辑，比如更新内容或执行其他操作
                console.log('点击了科室：', department);
            }
        }
    });

    // JavaScript 代码用于切换标签内容的显示
    function openTab(tabName) {
        // 隐藏所有标签内容
        var i, tabContent, tabLinks;
        tabContent = document.getElementsByClassName("tab-content");
        for (i = 0; i < tabContent.length; i++) {
            tabContent[i].style.display = "none";
        }
        // 显示当前选中标签的内容
        document.getElementById(tabName).style.display = "block";
    }
</script>
</body>
</html>
